import React from 'react';
import styles from './style';
import { View, SafeAreaView, Image, Text, TouchableOpacity, ScrollView } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back';
import { FlatList } from 'react-native-gesture-handler';
import { installReactHook } from 'react-native/Libraries/Performance/Systrace';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getUserInfo } from '../../../../common/api/user';
import { getPhotosList } from '../../../../common/api/photos';
import { dateFormat } from '../../../../util/date';
const downImg = require('../../img/downImg.png');
export default class Review extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                // { _id: '1', img: downImg, title: '昏黄的阳光', createdAt: '2021-01-21' },
                // { _id: '2', img: downImg, title: '昏黄的阳光', createdAt: '2021-01-21' },
                // { _id: '3', img: downImg, title: '昏黄的阳光', createdAt: '2021-01-21' },
            ],
            tab: ['审核中', '审核成功', '审核失败'],
            tabStatus: 0,
            title: '审核中',
        };
    }
    componentDidMount() {
        this.getData();
    }
    getData = async () => {
        let userInfo = await AsyncStorage.getItem('userInfo');

        if (userInfo) {
            userInfo = JSON.parse(userInfo);
        } else {
            const info = await getUserInfo();
            if (!info) {
                return;
            }
            userInfo = info;
        }
        console.log(userInfo);
        console.log({ avatar: userInfo.avatar });
        const res = await getPhotosList({ user: userInfo._id, auditStatus: this.state.tabStatus });
        this.setState({
            list: res,
        });
        console.log(res.length);
    };

    tabClick = index => {
        const title = this.state.tab[index];
        this.setState({ tabStatus: index, title: title });
        this.getData();
    };
    rederItem = ({ item, index }) => {
        const date = dateFormat(new Date(item.createdAt), 'YYYY-mm-dd HH:MM:SS');
        const uri = { uri: item.photos[0] };
        return (
            <Animatable.View animation="slideInUp" style={styles.fansStyle} key={item.id}>
                <Image source={uri} style={styles.fansImg} />
                <View style={styles.nameStyle}>
                    <Text style={styles.topText}>{item.title}</Text>
                    <Text style={styles.bottomText}>提交时间{date}</Text>
                </View>
                <View style={styles.titleStyle}>
                    <Text style={[{ color: '#ccc', fontSize: 12 }]}>{this.state.title}</Text>
                </View>
            </Animatable.View>
        );
    };
    render() {
        let { navigation } = this.props;
        let { list, tab, tabStatus, title } = this.state;
        return (
            <SafeAreaView style={styles.fans}>
                <Back navigation={navigation}></Back>
                <View style={[{ flexDirection: 'row' }]}>
                    <Text style={styles.fansText}>审核进度</Text>
                </View>
                <View style={styles.tabStyle}>
                    {tab.map((item, index) => {
                        return (
                            <TouchableOpacity onPress={() => this.tabClick(index)} key={item}>
                                <View
                                    style={[
                                        styles.tabList,
                                        { backgroundColor: tabStatus == index ? '#101010' : '#fff' },
                                    ]}
                                >
                                    <Text
                                        style={[
                                            styles.tabText,
                                            { color: tabStatus == index ? '#fff' : '#101010' },
                                        ]}
                                    >
                                        {item}
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        );
                    })}
                </View>

                <FlatList data={list} keyExtractor={item => item._id} renderItem={this.rederItem} />
            </SafeAreaView>
        );
    }
}
